<template>
  <div class="member-management">
    <!-- 搜索区域 -->
    <div class="search-area">
      <el-input
        v-model="searchForm.keyword"
        placeholder="请输入搜索内容"
        clearable
        style="width: 300px; margin-right: 10px;"
        @clear="handleSearch"
        @keyup.enter.native="handleSearch"
      >
        <el-button slot="append" icon="el-icon-search" @click="handleSearch"/>
      </el-input>
    </div>

    <!-- 会员列表 -->
    <el-table :data="tableData" border style="width: 100%; margin-top: 20px;">
      <el-table-column prop="customerName" label="会员姓名"/>
      <el-table-column prop="productName" label="产品名称"/>
      <el-table-column prop="number" label="订单号"/>
      <el-table-column prop="contactPerson" label="用户姓名"/>
      <el-table-column prop="contactPhone" label="客户电话"/>
      <el-table-column prop="materialStatus" label="材料状态">
        <template slot-scope="scope">
          <el-tag :type="scope.row.materialStatus === '待确认' ? 'warning' : 'success'">
            {{ scope.row.materialStatus }}
          </el-tag>
        </template>
      </el-table-column>
      <!-- 修改表格中的签证状态标签显示 -->
      <el-table-column prop="visaStatus" label="签证所处节点">
        <template slot-scope="scope">
          <el-tag :type="getVisaStatusType(scope.row.visaStatus)">
            {{ scope.row.visaStatus }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="orderTime" label="订单时间">
        <template slot-scope="scope">
          {{ scope.row.orderTime ? new Date(scope.row.orderTime).toLocaleString() : '' }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="text" @click="handleView(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[15, 25, 35, 45]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      class="pagination"
    />
    <el-dialog title="编辑会员信息" :visible.sync="dialogVisible" width="40%">
      <el-form :model="editForm" label-width="120px">
        <!-- 修改选择框中的选项样式 -->
        <el-form-item label="签证所处节点">
          <el-select v-model="editForm.visaStatus" placeholder="请选择签证状态">
            <el-option label="待使馆" value="待使馆"/>
            <el-option label="使馆审核中" value="使馆审核中" class="embassy-reviewing"/>
            <el-option label="已完成" value="已完成" class="completed"/>
            <el-option label="已拒签" value="已拒签" class="rejected"/>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitEdit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>



<script>
import axios from '@/utils/request'
export default {
  name: 'MemberManagement',
  data() {
    return {
      searchForm: {
        keyword: ''
      },
      tableData: [],
      currentPage: 1,
      pageSize: 15,
      total: 0,
      dialogVisible: false,
      editForm: {
        id: null,
        visaStatus: ''
      }
    }
  },
  methods: {
    async fetchData() {
      try {
        const params = {
          page: this.currentPage,
          pageSize: this.pageSize,
          keyword: this.searchForm.keyword || null
        }

        const res = await axios.get('/admin/order/page', { params })
        
        if (res.data && res.data.records) {
          this.tableData = res.data.records.map(record => ({
            ...record,
            orderTime: record.orderTime ? new Date(record.orderTime).toLocaleString() : '',
            // 使用数据库中的状态，如果为空则使用默认值
            materialStatus: record.materialStatus || '待确认',
            visaStatus: record.visaStatus || '待使馆'
          }))
          this.total = res.data.total || 0
        } else {
          this.$message.error('数据格式错误')
        }
      } catch (error) {
        console.error('获取会员数据失败：', error)
        this.$message.error('获取数据失败')
      }
    },
    handleSearch() {
      this.currentPage = 1
      this.fetchData()
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.fetchData()
    },
    handleView(row) {
      // 使用路由跳转到详情页，并传递数据
      this.$router.push({ 
          path: `/main/member/detail/${row.id}`, 
          query: {
              realname: row.contactPerson, // 假设 contactPerson 是 realname
              customerName: row.customerName,
              contactPhone: row.contactPhone,
              productName: row.productName,
              materialStatus: row.materialStatus,
              visaStatus: row.visaStatus,
              number: row.number
          }
      })
    },

    handleEdit(row) {
      this.editForm.id = row.id
      this.editForm.visaStatus = row.visaStatus  // 移除 contactPhone
      this.dialogVisible = true
    },

    // 将 submitEdit 移动到 methods 内部
    async submitEdit() {
      try {
        const res = await axios.put('/admin/order/embassy-status', {
          id: this.editForm.id,
          visaStatus: this.editForm.visaStatus
        });
        
        // 直接执行成功操作，不做额外判断
        this.$message.success('更新成功');
        this.dialogVisible = false;
        this.fetchData(); // 刷新数据
        
      } catch (error) {
        console.error('更新失败：', error);
        this.$message.error('更新失败');
      }
    },
    getVisaStatusType(status) {
      switch (status) {
        case '待使馆':
          return 'warning';
        case '使馆审核中':
          return 'info';  // 淡紫色
        case '已完成':
          return 'success';  // 绿色
        case '已拒签':
          return 'danger';  // 红色
        default:
          return '';
      }
    }
  },
  created() {
    this.fetchData()
  }
}
</script>

<style scoped>
.member-management {
  padding: 20px;
}

.search-area {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

/* 自定义签证状态颜色 */
:deep(.embassy-reviewing) {
  background-color: #e6e0f3 !important;
}

:deep(.completed) {
  background-color: #f0f9eb !important;
}

:deep(.rejected) {
  background-color: #fef0f0 !important;
}

/* 确保选中时的背景色也保持一致 */
:deep(.embassy-reviewing.selected) {
  background-color: #d4c5f0 !important;
}

:deep(.completed.selected) {
  background-color: #e1f3d8 !important;
}

:deep(.rejected.selected) {
  background-color: #fdd !important;
}
</style>